<template>
  <basic-dialog
    title="关联商品"
    width="55%"
    :visible="dialogVisible"
    :show-close="false"
    :showFooter="false"
  >
    <basic-table-form
      ref="formData"
      formItemWidth="80px"
      isBtnBarSingleRow
      :isScalingBtn="false"
      :formColumns="formItemList"
      :dataSource="formData"
      :handleSearchForm="handleQuery"
      :hasQueryPermission="false"
      @getFormData="getFormDataFn"
    >
      <template slot="extensionActions">
        <el-button type="primary" @click="handleBatchLinked">批量关联</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </template>
    </basic-table-form>
    <SkusTable
      class="table-wrap"
      showSelectCol
      showPagination
      :loading="tableInfo.loading"
      :columns="tableInfo.columns"
      :dataSource="tableInfo.list"
      :pagination="pagination"
      :total="pagination.total"
      :selectionChange="handleSelectionChange"
      :pageSizes="[10, 20, 40, 200]"
      @pageChange="handlePageChange"
      @pageSizeSelect="handlePageSizeChange"
    />
  </basic-dialog>
</template>
<script>
import { ApiRequest } from '@api/basePage';
import { getBtnsId } from '@/libs/btnsPermission';
import BasicDialog from '@/components/BasicDialog';
import BasicTableForm from '@/components/BasicForm';
import SkusTable from '@/components/skusTable';
import { isResponseSuccess } from '@/utils/bizUtils';
export default {
  components: {
    BasicDialog,
    BasicTableForm,
    SkusTable
  },
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    columns: {
      type: Array,
      default () {
        return [];
      }
    },
  },
  data () {
    return {
      dialogVisible: false,
      formData: {
        categoryPath: '',
        spuNo: '',
        productName: ''
      },
      formItemList: [
        {
          prop: 'categoryPath',
          label: '商品分类',
          type: 'input'
        },
        {
          prop: 'spuNo',
          label: 'SPU编码',
          type: 'input'
        },
        {
          prop: 'productName',
          label: '商品名称',
          type: 'input'
        },
      ],
      tableInfo: {
        list: [],
        selection: [],
        loading: false,
        columns: [
          {
            title: '商品名称',
            key: 'productName'
          }, {
            title: 'SPU编码',
            key: 'spuNo'
          }, {
            title: '商品分类',
            key: 'categoryPath'
          }, {
            title: '品牌',
            key: 'brandName'
          }
        ]
      },
      pagination: {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页条数
        total: 0 // 总条数
      },
      apiObj: {
        getSpuPager: { // 关联商品查询
          url: '/sysback/modifySpuCategory/getSpuPager',
          type: 'post'
        },
      }
    }
  },
  watch: {
    visible (val) {
      this.dialogVisible = val;
    }
  },
  methods: {
    getFormDataFn (formData) {
      this.formData = formData;
    },
    // 查询
    handleQuery () {
      const curBtnId = getBtnsId('关联商品');
      sessionStorage.setItem('buttonId', curBtnId);
      this.pagination.pageNum = 1;
      this.getTableDataFn();
    },
    async getTableDataFn () {
      const { categoryPath, spuNo, productName } = this.formData;
      const data = {
        categoryPath,
        spuNo,
        productName,
        pageShow: this.pagination.pageSize,
        nowPage: this.pagination.pageNum
      }
      const { url, type } = this.apiObj.getSpuPager;
      try {
        this.tableInfo.loading = true;
        const res = await ApiRequest(url, type, data);
        this.tableInfo.loading = false;
        if (!isResponseSuccess(res)) {
          return false;
        }
        const { results, totalNum } = res.retData;
        this.tableInfo.list = results;
        this.pagination.total = totalNum;
      } catch (err) {
        this.tableInfo.loading = false;
      }
    },
    // 清空
    handleReset () {
      this.$refs.formData.handleResetForm();
    },
    // 批量关联
    handleBatchLinked () {
      this.$emit('getSelectRows', this.tableInfo.selection);
      this.clearDataStatusFn();
      this.closeDialogFn();
    },
    // 取消
    handleCancel () {
      this.closeDialogFn();
    },
    // 表格数据勾选或勾选取消
    handleSelectionChange (list) {
      this.tableInfo.selection = list;
    },
    // 改变页码
    handlePageChange (currentPage) {
      this.pagination.pageNum = currentPage;
      this.getTableDataFn(); // 重新加载表格数据
    },
    // 改变当前页条数大小
    handlePageSizeChange (pageSize) {
      this.pagination.pageSize = pageSize;
      if (this.tableInfo.list.length === 0) {
        return false;
      }
      this.getTableDataFn(); // 重新加载表格数据
    },
    // 关闭弹框
    closeDialogFn () {
      this.dialogVisible = false;
      this.$emit('update:visible', this.dialogVisible);
    },
    // 清空状态
    clearDataStatusFn () {
      this.handleReset(); // 表单清空
      this.tableInfo.list = []; // 表格清空
      this.pagination = {
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页条数
        total: 0 // 总条数
      }
    },
  }
}
</script>
<style lang="less" scoped>
.table-wrap {
  margin-top: 10px;
}
</style>
